<template>
    <div>
        <ABadge :count="state.count" :dotOnly="state.dotOnly" :hiddenFunc="methods.hiddenFunc">
            <AButton>我右上角会有小红点</AButton>
        </ABadge>
    </div>
    <AForm class="c-m-t-m" color="primary" style="max-width: 800px;">
        <AFormItem label="count" class="c-m-t-m">
            <AInputNumber v-model:value="state.count" attachButtonShown></AInputNumber>
        </AFormItem>
        <AFormItem label="dotOnly" class="c-m-t-m">
            <AInputSwitch v-model:value="state.dotOnly"></AInputSwitch>
        </AFormItem>
    </AForm>
</template>

<script setup lang="ts">
import { AButton, ABadge, AForm, AFormItem, AInputSwitch, AInputNumber } from 'aosv'
import { reactive } from 'vue'

interface StateType {
    count: number
    dotOnly: boolean
}
const state = reactive<StateType>({
    count: 0,
    dotOnly: false
})

const methods = {
    hiddenFunc(val: number) {
        return val % 2 === 1
    }
}
</script>